<template>
	<view class="content">
		<!-- 头部搜索区域 -->
		<!-- <view class="header">
			<view class="inner">
				<icon type="search" size="16" class="icon"></icon>
				<text class="search">
					搜索
				</text>
			</view>
		</view> -->
		<!-- 头部搜索区域组件 -->
		<searchlink></searchlink>
		<!-- 轮播图 -->
		<swiper autoplay circular>
			<swiper-item v-for="(item,index) in swiperdata" :key="index" indicator-dots autoplay circular>
				<image :src="item.image_src"></image>
			</swiper-item>
		</swiper>
		<!-- 分类导航 -->
		<view class="nav">
			<image v-for="(item,index) in catitemsdata" :src="item.image_src" :key="index" mode=""></image>
		</view>
		<!-- 楼层 -->
		<view class="floor" v-for="(fitem,index) in floordata" :key="index">
			<view class="floor_title">
				<image :src="fitem.floor_title.image_src" mode=""></image>
			</view>
			<view class="product_list">
				<view class="left">
					<image :src="fitem.product_list[0].image_src" mode=""></image>
				</view>
				<view class="right">
					<block v-for="(item,index) in fitem.product_list" :key="index">
						<image v-if="index" :src="item.image_src"></image>
					</block>
				</view>

			</view>
		</view>


	</view>
</template>
<script>
	// import request from '../../utils/request.js'
// 导入组件
import searchlink from '../../components/searchLink.vue'
	export default {
		components:{
			searchlink
		},
		data() {
			return {
				// 轮播图数据
				swiperdata: [],
				// 楼层数据
				floordata: [],
				// 导航数据
				catitemsdata: []
			}
		},
		onLoad() {
			this.getSwiperdata()
			this.getFloordata()
			this.getCatitemsdata()
		},
		methods: {
			// 获取轮播图
		async	getSwiperdata() {
			// 	uni.request({
			// 		url: 'https://www.uinav.com/api/public/v1/home/swiperdata',
			// 		success: (res) => {
			// 			// console.log((res))
			// 			let {
			// 				meta,
			// 				message
			// 			} = res.data
			// 			if (meta.status === 200) {
			// 				this.swiperdata = message
			// 			} else {
			// 				uni.showToast({
			// 					title: meta.msg
			// 				})
			// 			}
			// 		}
			// 	})
			this.swiperdata = await this.$request({
				url:'/v1/home/swiperdata'
			})
			},
		
			// 获取楼层
		async	getFloordata() {
				// uni.request({
				// 	url: 'https://www.uinav.com/api/public/v1/home/floordata',
				// 	success: (res) => {
				// 		// console.log((res))
				// 		let {
				// 			meta,
				// 			message
				// 		} = res.data
				// 		if (meta.status === 200) {
				// 			this.floordata = message
				// 		} else {
				// 			uni.showToast({
				// 				title: meta.msg
				// 			})
				// 		}
				// 	}
				// })
				this.floordata = await this.$request({
					url:'/v1/home/floordata'
				})
			},
			// 获取导航分类
			async getCatitemsdata() {
				// this.$request({
				// 	url: '/v1/home/catitems',
				// 	// callback: res => {
				// 	// 	this.catitemsdata = res
				// 	// }
				// }).then(res=>{
				// 	this.catitemsdata = res
				// })
				this.catitemsdata = await this.$request({
					url: '/v1/home/catitems'
				})
			},


		}
	}
</script>
<style lang="less">
	.content {
		.header {
			height: 100rpx;
			padding: 20rpx 16rpx;
			background-color: #eb4450;
			box-sizing: border-box;

			.inner {
				position: relative;
				// display: flex;
				// align-items: center;
				// justify-content: space-evenly;
				height: 60rpx;
				line-height: 60rpx;
				background-color: #fff;
				border-radius: 8rpx;
				text-align: center;

				.icon {
					position: absolute;
					left: 40%;
					top: 14rpx;
					margin-right: 10rpx;
				}

				.search {
					color: #bbb;
				}

			}
		}

		swiper {
			height: 340rpx;

			image {
				height: 340rpx;
				width: 100%;
			}
		}

		.nav {
			display: flex;
			align-items: center;
			justify-content: space-around;
			height: 194rpx;

			image {
				width: 128rpx;
				height: 140rpx;
			}
		}

		.floor {
			padding: 20rpx 17rpx;

			.floor_title {
				width: 100%;
				height: 88rpx;

				image {
					width: 100%;
					height: 88rpx;
				}
			}

			.product_list {
				display: flex;

				.left {
					image {
						width: 232rpx;
						height: 460rpx;
					}
				}

				.right {
					display: flex;
					flex-wrap: wrap;
					justify-content: space-around;

					image {
						width: 232rpx;
						height: 230rpx;
					}
				}
			}
		}
	}
</style>
